<template>
  <div class="card-wrapper">
    <a-card :style="{ width: '100%' }" bordered>
      <!-- 上结构 -->
      <div class="card-content">
        <!-- 左侧图片 -->
        <div class="image-container">
          <img
            alt="Java 面试题"
            width="80"
            height="80"
            src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
          />
        </div>
        <!-- 右侧文字 -->
        <div class="text-info">
          <h1 class="main-title">Java 热门面试题 200 道</h1>
          <p class="description">
            2024 最新 Java 热门面试题 200 道，涵盖
            Java、MySQL、Redis、Spring、SpringBoot、SpringCloud、
            计算机网络、操作系统、消息队列、Netty、后端场景题等。
          </p>
        </div>
      </div>

      <!-- 下结构 -->
      <div class="action-buttons">
        <a-button type="primary" class="action-button">开始刷题</a-button>
        <a-button type="text" class="action-button">分享</a-button>
      </div>
    </a-card>
    <a-card class="search-card">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="6">
                <a-form-item field="title" label="题目标题">
                  <a-input
                    v-model="formModel.title"
                    placeholder="请输入题目标题"
                    :allow-clear="true"
                  />
                </a-form-item>
              </a-col>
              <!-- 题目难度 -->
              <a-col :span="6">
                <a-form-item field="difficulty" label="题目难度">
                  <a-select
                    v-model="formModel.difficulty"
                    :options="difficultyTypeOptions"
                    placeholder="全部"
                  />
                </a-form-item>
              </a-col>
              <!-- 会员专属 -->
              <a-col :span="6">
                <a-form-item field="vip" label="专属VIP">
                  <a-select
                    v-model="formModel.vip"
                    :options="vipTypeOptions"
                    placeholder="全部"
                  />
                </a-form-item>
              </a-col>
              <!-- 自定义的标签选择器 -->
              <a-col :span="6">
                <a-form-item field="title" label="题目标签">
                  <a-auto-complete
                    v-model="formModel.tag"
                    :data="allTags"
                    :style="{ width: '360px' }"
                    placeholder="请输入题目标签"
                    @select="onSelect"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data="data"
        class="clickable-row"
        @row-click="handleRowClick"
      >
        <!-- 题目难度 -->
        <template #questionDifficulty="{ record }">
          <a-tag v-if="record.questionDifficulty === 0" color="pinkpurple"
            >简单
          </a-tag>
          <a-tag v-else-if="record.questionDifficulty === 1" color="magenta"
            >中等
          </a-tag>
          <a-tag v-else color="gray">困难</a-tag>
        </template>

        <!-- 题目标签 -->
        <template #questionTags="{ record }">
          <a-space>
            <a-tag
              v-for="(tag, index) in record.tags"
              :key="tag"
              :color="getTagColor(index)"
            >
              {{ tag }}
            </a-tag>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';

  const colors = [
    'orangered',
    'orange',
    'gold',
    'lime',
    'green',
    'cyan',
    'blue',
    'arcoblue',
    'purple',
    'pinkpurple',
    'magenta',
    'gray',
  ];
  const formModel = reactive({
    title: '',
    difficulty: '',
    vip: '',
    questionBank: '',
    status: '',
    publish: '',
    tag: '',
  });
  const difficultyTypeOptions = [
    { label: '简单', value: 0 },
    { label: '中等', value: 1 },
    { label: '困难', value: 2 },
  ];
  const vipTypeOptions = [
    { label: 'VIP', value: 1 },
    { label: '非VIP', value: 0 },
  ];
  const allTags = [
    'JAVA',
    'C++',
    'C#',
    'JavaScript',
    'JQuery',
    'Python',
    'PHP',
  ]; // 所有的标签数据
  const data = reactive([
    {
      key: '1',
      title: 'Jane Doe',
      questionDifficulty: 0,
      tags: ['java', 'c++'],
    },
    {
      key: '2',
      title: 'Alisa Ross',
      questionDifficulty: 1,
      tags: ['java', 'c++'],
    },
  ]);

  const columns = [
    {
      title: 'title',
      dataIndex: 'title',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'difficultyLevel',
      dataIndex: 'difficultyLevel',
      sortable: {
        sortDirections: ['ascend'],
      },
      slotName: 'questionDifficulty',
    },
    {
      title: 'tags',
      dataIndex: 'tags',
      slotName: 'questionTags',
    },
  ];
  const onSelect = (value: string) => {
    formModel.tag = value;
  };
  const getTagColor = (index: number) => {
    if (index > colors.length - 1) {
      index %= colors.length;
    }
    return colors[index];
  };
  // 行点击事件
  const handleRowClick = (record: any) => {
    console.log('点击的行数据:', record);
  };
</script>

<style scoped>
  /* 卡片整体样式 */
  .card-wrapper {
    width: 90%;
    margin: 0 auto;
    /*max-width: 800px; !* 限制卡片宽度，居中 *!*/
  }

  /* 卡片内容部分 */
  .card-content {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    margin-bottom: 16px; /* 图片与按钮之间留白 */
  }

  /* 图片容器 */
  .image-container {
    flex-shrink: 0; /* 防止图片缩放 */
    margin-right: 16px; /* 图片和文字之间的间距 */
  }

  .image-container img {
    width: 80px; /* 固定图片宽度 */
    height: 80px; /* 固定图片高度 */
    border-radius: 4px; /* 图片圆角 */
  }

  /* 文字部分 */
  .text-info {
    flex: 1; /* 文本占满剩余空间 */
  }

  .main-title {
    font-size: 20px; /* 标题字体大小 */
    font-weight: bold; /* 加粗标题 */
    margin: 0 0 8px 0; /* 标题与描述之间的间距 */
  }

  .description {
    font-size: 14px; /* 描述文字大小 */
    color: #666; /* 描述文字颜色 */
    line-height: 1.6; /* 增加行高 */
  }

  /* 按钮部分 */
  .action-buttons {
    display: flex;
    gap: 12px; /* 按钮之间的间距 */
  }

  .action-button {
    padding: 0 16px;
  }

  .search-card {
    margin-top: 10px;
  }

  /* 小手光标 */
  .clickable-row {
    cursor: pointer;
  }

  /* 鼠标悬浮效果 */
  .clickable-row:hover {
    background-color: #f5f5f5; /* 行高亮背景色 */
  }
</style>
